<template>
	<view>
		<view class="head" :style="{backgroundImage:`url(${changeImg})`}" @longpress="changeImage()">
			
			<block class="" v-if="!hasLogin"><button type="default" @click="loginAuth">去登录</button></block>
			<block v-else>
				<view class="userinfo">
					<image :src="userInfo.avatarUrl" class="face"></image>
					<!-- 头像 -->
					<!-- <image :src="userInfo.avatarUrl" class="face"></image> -->
					<view class="info">
						<view class="username">{{ userInfo.nickName }}</view>
						<!-- {{userinfo.name}} -->
						<view class="showblock">
							<label class="show">{{ school }}  </label>
							<label class="kongge"></label>
							<label class="show">{{ major }}  </label>
							<label class="kongge"></label>
							<label class="show">{{ exPosition }}  </label>
						</view>
<!-- 						<view class="show">这个人很懒，什么也没写~</view> -->
					</view>
				</view>
				<view class="bianjibtn" hover-class="opcity" @click="tobianji()">
						<image src="../../static/xiugai.png" class="setting" mode="aspectFill"></image><!-- 设置 -->
				</view>
			</block>
		</view>
		<view class="container_4">
			<view class="middle-item" hover-stay-time="150" @click="toshoucang()">
				<image class="image_tupian_1" src="../../static/shoucang.png"></image>
				<!-- 收藏 -->
				<text class="text_2">我的收藏</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class="middle-item" hover-class="opcity" hover-stay-time="150" @click="tofabu()">
				<image class="image_tupian_1" src="../../static/fabujishu.png"></image>
				<!-- 发布技术 -->
				<text class="text_2">我的发布</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>
			<view class="view_line"></view>

			<view class="middle-item" hover-class="opcity" hover-stay-time="150" @click="torenzheng()">
				<image class="image_tupian_1" src="../../static/renzheng.png"></image>
				<!-- 认证 -->
				<text class="text_2">我的认证</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>
		</view>

		<view class="container_4">
			<view class="middle-item" hover-class="opcity" hover-stay-time="150" @click="tozhaopin()">
				<image class="image_tupian_1" src="../../static/zhaopinrenshi.png"></image>
				<!-- 招聘人事 -->
				<text class="text_2">我要招聘</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class="middle-item" hover-class="opcity" hover-stay-time="150" @click="toyijian()">
				<image class="image_tupian_1" src="../../static/yijianfankui.png"></image>
				<!-- 意见反馈 -->
				<text class="text_2">反馈意见</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>

			<view class="view_line"></view>

			<view class="middle-item" hover-class="opcity" hover-stay-time="150" @click="tolianxi()">
				<image class="image_tupian_1" src="../../static/lianxiwomen.png"></image>
				<!-- 联系我们 -->
				<text class="text_2">联系我们</text>
				<image class="image-jiantou" src="../../static/to.png"></image>
			</view>
		</view>
		<view class="bottom" @click="showLogout">退出登录</view>
		<van-dialog id="van-dialog" @confirm="bindLogout"/>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Dialog from '@vant/weapp/dist/dialog/dialog';
export default {
	computed: {
		...mapState(['userInfo', 'hasLogin'])
	},	
	data() {
		return{
			"school": "",
			"major": "",
			"exPosition":"",
			// "changeImg": uni.getStorageSync("changeImg")
			"changeImg": '../../static/background.jpg'
		}
	},
	// onLoad() {
	// 	uni.setStorageSync('changeImg','../../static/background.jpg');
	// },
	onShow() {
		this.school = this.getSchool();
		this.major = this.getMajor();
		this.exPosition = this.getExPosition();
	},
	methods: {
		...mapActions(['logout', 'login']),
		bindLogout() {
			uni.removeStorageSync('userInfo');
			this.logout();
		},
		showLogout() {
			Dialog.confirm({
				title: '标题',
				message: '确定退出登录吗'
			})
		},
		// 切换背景图片
		changeImage: function(){
			let that=this;
			   uni.chooseImage({
			    count: 1,
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album'], //从相册选择
			    success: function (res) {
			     const tempFilePaths = res.tempFilePaths;//本地路径
				 console.log('本地路径',tempFilePaths);
				 that.changeImg = tempFilePaths[0];
				 console.log('changeImg', that.changeImg);
			     const uploadTask = uni.uploadFile({
			     // url : 'https://demo.hcoder.net/index.php?c=uperTest',
				  url:'https://hotenergy.club/workapp/user/get_url',
			      filePath: tempFilePaths[0],
			      name: 'file',
			 	  header:{"Content-Type": "multipart/form-data"},
			      success: function (uploadFileRes) {
					console.log(uploadFileRes)
			       console.log('后台',uploadFileRes.data);
				   that.changeImg = uploadFileRes.data;
			      }
			     });
			    },
			    error : function(e){
			     console.log('错误',e);
			    }
			   });
			  },
		toshoucang() {
			uni.navigateTo({
				url: 'shoucang'
			});
		},
		tobianji(){
			uni.navigateTo({
				url:"xiugaixinxi"
			})
		},
		tofabu() {
			uni.navigateTo({
				url: 'fabu'
			});
		},
		torenzheng() {
			uni.navigateTo({
				url: 'renzheng'
			});
		},
		tozhaopin() {
			uni.navigateTo({
				url: 'zhaopin'
			});
		},
		toyijian() {
			uni.navigateTo({
				url: 'yijian'
			});
		},
		tolianxi() {
			uni.navigateTo({
				url: 'lianxi'
			});
		},
		getSchool(){
			const value = uni.getStorageSync('userInfo');
			return value.school;
		},
		getMajor(){
			const value = uni.getStorageSync('userInfo');
			return value.major;
		},
		getExPosition(){
			const value = uni.getStorageSync('userInfo');
			return value.exPosition;
		},
		loginAuth() {
			// 点击触发事件了~
			console.log('点击触发事件loginAuth');
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: getUserProfileRes => {
					console.log('getUserProfile成功后的结果', getUserProfileRes);
					let iv = getUserProfileRes.iv;
					let rawData = getUserProfileRes.rawData;
					let signature = getUserProfileRes.signature;
					let encrypteData = getUserProfileRes.encryptedData;
					// 执行login方法
					uni.login({
						success: loginRes => {
							console.log('Login结果打印', loginRes);
							let code = loginRes.code;
							// login成功后需要执行request 请求，发送数据至后台获取数据
							uni.request({
								url: 'https://hotenergy.club/workapp/user/login',
								method: 'POST',
								data: {
									iv: iv,
									rawData: rawData,
									signature: signature,
									encrypteData: encrypteData,
									code: code
								},
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								dataType: 'json',
								success: requestRes => {
									console.log('登录请求成功结果~', requestRes);
									try {
										uni.setStorageSync('userInfo', requestRes.data.data);
										this.login(requestRes.data.data);
									} catch (e) {
										console.log('缓存用户信息出错', e);
									}
								},
								fail: requestErr => {
									console.log('登录请求失败结果~', requestErr);
								}
							});
						},
						fail(loginErr) {
							console.log('loginErr', loginErr);
						}
					});
				},
				fail: getUserProfileErr => {
					console.log('getUserProfile失败~', getUserProfileErr);
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}

.head {
	display: flex;
	align-items: center;
	padding: 20rpx;
	height: 180rpx;
	/* border-bottom: 1px solid #ccc;
	background-color: #FFFFFF; */
	/* background-image: url(../../static/background.jpg); */
	background-size: 100% auto;
	background-position: center;
}

.userinfo {
	width: 90%;
	display: flex;
}

.face {
	flex-shrink: 0; //防止被挤压
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
}

.info {
	display: flex;
	flex-direction: column; //换行，从上往下排列，第1行在上方
	padding-left: 30rpx;
}

.username {
	margin-top: 25rpx;
	font-weight: bold;
	color: #ffffff;
}

.showblock{
	margin-top: 20rpx;
}

.show {
	font-size: xx-small;
/* 	border: #F1F1F1 2rpx solid; */
	border-radius: 50rpx;
	padding: 7rpx 12rpx 7rpx 12rpx;
	background-color: rgba(0, 0, 0, .15);
	display: inline-block;
/* 	opacity: 8%; */
	color: #ffffff;
}
.kongge{
	margin-right: 15rpx;
}

.setting {
	flex-shrink: 0;
	width: 40rpx;
	height: 40rpx;
}

.container_4 {
	height: 420rpx;
	display: flex;
	flex-direction: column;
	border-radius: 15rpx;
	margin: 20rpx 2% 20rpx 2%;
	background-color: #ffffff;
}

.middle-item {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.image_tupian_1 {
	display: flex;
	width: 50rpx;
	height: 50rpx;
	margin: 0rpx 20rpx 0rpx 40rpx;
}

.image-jiantou {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	/* 要约束所在位置的子元素的位置要设置成绝对 */
	right: 30rpx;
	/* 靠右调节 */
	margin-right: 35rpx;
}

/* 线 */
.view_line {
	width: 90%;
	height: 5rpx;
	background: #f3f3f3;
	/* margin: 0rxp 5% 0rxp 5%; */
	margin: 0 auto;
	text-align: center;
}

.bottom {
	color: #8d8d8d;
	font-size: small;
	//单行居中
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}
</style>
